
<template>
    <!-- 面包屑 -->
    <el-breadcrumb separator="/" style="border-bottom: 1px solid #ccc;padding: 10px 0;margin-bottom:10px ;">
    <el-breadcrumb-item :to="{ path: '/index' }">首页</el-breadcrumb-item>
    <el-breadcrumb-item to="/oms/order"
      >订单</el-breadcrumb-item
    >
    <el-breadcrumb-item>退货原因设置</el-breadcrumb-item>
  </el-breadcrumb>

  <OmsList>
    <template #addButton>
      <el-button @click="isShowDialog=true">添加</el-button>
    </template>
  </OmsList>

  <el-table :border="true" style="margin-bottom: 20px;" @selection-change="selectChange" :data="tableData" size="small">
    <el-table-column type="selection" width="55" />
    <el-table-column label="编号" prop="id"/>
    <el-table-column label="原因类型" prop="name"/>
    <el-table-column label="排序" prop="sort"/>
    <el-table-column label="是否可用" prop="status">
      <template #default="scope">
        <el-switch v-model="scope.row.status" :active-value="1" :inactive-value="0" 
        :before-change="()=>statusChange(scope.row)"/>
      </template>
    </el-table-column>
    <el-table-column label="添加时间" prop="createTime">
      <template #default="scope">
          <div>
            {{
              scope.row.createTime
                ? dayjs(scope.row.createTime).format("YYYY-MM-DD HH:mm:ss")
                : "/"
            }}
          </div>
        </template>
    </el-table-column>
    <el-table-column label="操作">
      <template #default="scope">
        <el-button size="small" icon="edit" @click="edit(scope.row.id)">编辑</el-button>
        <el-button size="small" @click="delAPI([scope.row.id])">删除</el-button>
      </template>
    </el-table-column>
  </el-table>

  <el-row justify="space-between">
    <el-col :span="8">
      <el-select placeholder="批量操作" v-model="action">
        <el-option label="批量删除" value="0"></el-option>
      </el-select>
      <el-button type="primary" style="margin-left:10px" @click="confirmAction">确定</el-button>
    </el-col>

    <!-- 分页 -->
    <el-col :span="14">
    <el-pagination
        v-model:current-page="currentPage"
        v-model:page-size="pageSize"
        :page-sizes="[10, 20, 30, 40]"
        :background="true"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
        hide-on-single-page
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </el-col>
  </el-row>
  <!-- 添加对话框 -->
  <OmsAddReason v-model:show-dialog="isShowDialog" :title="title" :id="idRef"/>
</template>
<script setup lang="ts">
import OmsAddReason from '@/components/c-oms/OmsAddReason.vue';
import OmsList from '@/components/c-oms/OmsList.vue';
import { Order } from '@/request/api';
import * as dayjs from "dayjs";
import { ElMessage, ElMessageBox } from 'element-plus';
import { ref } from 'vue';

let currentPage = ref(1)
let pageSize = ref(10)
let total = ref(0)
let tableData = ref([])
// 子组件的搜索筛选表单
let form : Order.IreqOrderReturn = null
// 批量操作
let action = ref("0")
// 选中数据
let selected = ref([])
// 对话框
let isShowDialog = ref(false)
// 对话框title
let title = ref("添加退货原因")
// 修改需要的id
let idRef = ref(-1)

const handleSizeChange = function(param){
  pageSize.value = param
  getTableData()
  
}
const handleCurrentChange = function(param){
  currentPage.value = param
  getTableData()
}
// 获取数据API
const getTableData = async function(){
  const result = await Order.OrderReturnResonListAPI({...form,pageNum:currentPage.value,pageSize:pageSize.value})
  tableData.value = result.list
  total.value = result.total
  if(tableData.value.length<=0){
    ElMessage.info("暂无数据")
  }
}
//创建时执行
getTableData() 

// 状态改变
const statusChange = async function(params):Promise<boolean>{
  try{
    if(params.status==0){
   Order.OrderUpdateReturnResonStatusAPI({ids:params.id,status:1})
  }else{
   Order.OrderUpdateReturnResonStatusAPI({ids:params.id,status:0})
  }
  ElMessage.success("状态修改成功")
  return true
  }catch{
    ElMessage.error("状态修改失败")
    return false
  }
} 
// 删除请求
const delAPI = async function(params:number[]){
  let result = await Order.OrderDelReturnResonAPI(params)
  if(result>0){
    ElMessage.success("已成功删除"+result+"条数据")
    getTableData()
  }
}
// 编辑操作
const edit = function(id:number){
  title.value = "编辑退货原因"
  idRef.value = id
  isShowDialog.value = true
}
/**
 * @param 搜索表单
 * 类型：IreqOrderList
 */
const searchAction = async function(param:Order.IreqOrderReturn){
  // 触发自定义搜索事件
  form = param  
  currentPage.value = 1
  getTableData()
}
// 表格选择项
const selectChange = function(selection){
  selected.value = selection
  
}
// 批量操作确认
const confirmAction = function(){
  if(selected.value.length<=0){
    ElMessage.info("请选择要操作的订单")
    return false
  }
    ElMessageBox({
      title:"提示",
      message:"是否进行删除操作",
      type:"warning",
      showCancelButton:true,
      beforeClose(action, instance, done) {
            if(action==="confirm"){
                let result = selected.value.map(item=>{
                  return item.id
                })
                delAPI(result)
              }
            done()
        },
    })
}
</script> 